<template>
  <div class="ktv-list-item">
    <!-- 推荐按摩列表 -->
    <router-link :to="{
      path: '/detail',
      query: {
        id: data.id,
        field: 'ktv',
      }
      }">
        <div class="img">
          <img :src="data.img" alt="">
        </div>
        <!-- 信息 -->
        <div class="info">
          <h1 class="title">{{ data.name }}</h1>
          <p class="start-score">
            <stars :starNum="Number(data.star)"></stars>
            <span class="score">{{data.score}}分</span>
          </p>
          <div class="others">
            <span class="price-wrap">
              <span>￥</span>
              <span class="price">{{ data.default_price }}</span>
              <span>元</span>
            </span>
            <span class="city-name">
              {{ data.city_name }}
            </span>
          </div>
        </div>
      </router-link>
  </div>
</template>

<script>
import stars from '../Sub/Star.vue'
export default {
  name: 'KtvListItem',
  props: {
    data: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  components: {
    stars
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/mixins.scss';

.ktv-list-item {
  width: 100%;  
  height: 1.2rem;
  display: flex;
  background-color: #fff;
  margin-top: 1px;
  a {
    display: flex;
    width: 100%;
    height: 100%;
    .img {
      box-sizing: border-box;
      width: 1.2rem;
      height: 1.2rem;
      padding: .1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      padding: .1rem .1rem .1rem 0;
      .title {
        max-width: 2.45rem;
        font-size: .2rem;
        font-weight: bold;
        @include ellipsis;
      }
      .start-score {
        display: flex;
        .score {
          font-size: .16rem;
          color: orange;
          margin-left: .04rem;
        }
      }
      .others {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price-wrap {
          font-size: .16rem;
          .price {
            font-size: .18rem;
            color: aqua;
            font-weight: bold;
          }
        }
        .city-name {
          font-size: .16rem;
          font-weight: bold;
        }
      }
    }
  }
}
</style>